<script src="jquery-3.5.1.min.js"></script>
<div id="test-highlight1">
    <p>什么是<span>jQuery</span></p>
    <p><span>jQuery</span>是目前最流行的<span>JavaScript</span>库。</p>
</div>
<button onclick="run1()">run</button>

<div id="test-highlight2">
    <p>什么是<span>jQuery</span> <span>Plugin</span></p>
    <p>编写<span>jQuery</span> <span>Plugin</span>可以用来扩展<span>jQuery</span>的功能。</p>
</div>
<button onclick="run2()">run</button>

<div id="test-highlight">
    <p>如何编写<span>jQuery</span> <span>Plugin</span></p>
    <p>编写<span>jQuery</span> <span>Plugin</span>，要设置<span>默认值</span>，并允许用户修改<span>默认值</span>，或者运行时传入<span>其他值</span>。</p>
</div>
<button onclick="run3()">run</button>

<script>
    $.fn.highlight1 = function() {
        this.css('backgroundColor', '#fffceb').css('color', '#d85030');
        return this;
    }
    $.fn.highlight2 = function (options) {
        // 要考虑到各种情况:
        // options为undefined
        // options只有部分key
        var bgcolor = options && options.backgroundColor || '#fffceb';
        var color = options && options.color || '#d85030';
        this.css('backgroundColor', bgcolor).css('color', color);
        return this;
    }
    function run1()
    {
        $('#test-highlight1 span').highlight1();
    }
    function run2()
    {
        $('#test-highlight2 span').highlight2({
            backgroundColor: '#00a8e6',
            color: '#ffffff'
        });
    }
    $.fn.highlight = function(options){
        var opts = $.extend({}, $.fn.highlight.defaults, options);
        this.css('backgroudColor', opts.backgroundColor).css('color', opts.color);
        return this;
    }
    $.fn.highlight.defaults={
        color: '#d85030',
        backgroundColor: '#fff8de'
    }
    function run3()
    {
        $.fn.highlight.defaults.color = '#659f13';
        $.fn.highlight.defaults.backgroundColor = '#f2fae3';
        $('#test-highlight p:first-child span').highlight();
        $('#test-highlight p:last-child span').highlight({
            color: '#dd1144'
        });
    }
</script>